<template>
  <div class="drag-drop-item">
    <draggable v-model="templateList" :group="groupA" @start="draStart" @end="draEnd" item-key="id" :sort="true"
      :disabled="false" animation="500">
      <template #item="{ element }">
        <div class="template-item">
          <div class="template-item-img"> <img :src="element.modelUrl" /></div>
          <div class="template-item-name">{{ element.modelName }}</div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script setup>
import { Showroom3DStore } from "@/pinia/Showroom3D";
const s3Store = Showroom3DStore();
import draggable from 'vuedraggable';

// 计算属性
const templateList = computed(() => {
  return s3Store.modelTemplateList;
});

const groupA = ref({ name: 'test', pull: true, put: false })

const data = reactive({})

onBeforeMount(() => {

});

onMounted(() => {
  let arr = [{
    "templateId": "",
    "modelId": "",
    "modelName": "T8一体化",
    "modelUrl": "/src/assets/img/s3d_dh01.png",
    "modelType": "lamp",
    "modelStyle": "mstyle",
    "clsName": "drag-move-item",
    "zIndex": 3,
    "offsetX": 0,
    "offsetY": 0,
    "width": 96,
    "height": 96,
    "positionX": 1236,
    "positionY": 461
  }, {
    "templateId": "",
    "modelId": "",
    "modelName": "贴顶灯",
    "modelUrl": "/src/assets/img/s3d_dh02.png",
    "modelType": "lamp",
    "modelStyle": "mstyle",
    "clsName": "drag-move-item",
    "zIndex": 3,
    "offsetX": 0,
    "offsetY": 0,
    "width": 96,
    "height": 96,
    "positionX": 1236,
    "positionY": 461
  }]
  s3Store.setModelTemplateList(arr)
});

const draStart = (e) => {
  console.log('拖拽开始->', e);
}

const draEnd = (e) => {
  console.log('拖拽结束->', e);
}

const draMove = (e) => {
  console.log(e);
}

const draAdd = (e) => {
  console.log(e);
}

const draRemove = (e) => {
  console.log(e);
}

const draUpdate = (e) => {
  console.log(e);
}

</script>
<style lang="scss" scoped>
.drag-drop-item {
  .box-item {
    width: 8rem;
    height: 8rem;
    background-color: blue;
  }

  .template-item {
    display: flex;
    cursor: pointer;
    margin-bottom: 0.5rem;
    border: 1px solid #010101;

    img {
      width: 8rem;
      height: 8rem;
      background-color: #80858a;
    }

    .template-item-img {
      width: 8rem;
      height: 8rem;
      padding: 0.5rem;
      background-color: #010101;
    }

    .template-item-name {
      width: 100%;
      font-size: 1.2rem;
    }
  }
}
</style>